<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="num1">
    <select name="" id="sel">
        <!-- value不能为空，且不能重复 -->
        <option value="1">+</option>
        <option value="2">-</option>
        <option value="3">*</option>
        <option value="4">/</option>
    </select>
    <input type="text" id="num2">
    <button id="btn">=</button>
    <input type="text" id="res">

    <script>


        // 需要注意的问题
        //    1 复杂的判断使用if   固定值判断使用switch
        //    2 switch case  是做全等判断   数据类型和值必须全等




        // 获取对象
        var oNum1 = document.getElementById('num1') ;
        var oNum2 = document.getElementById('num2') ;
        var oSel = document.getElementById('sel') ;
        var oBtn = document.getElementById('btn') ;
        // console.log(oBtn) ;
        var oRes = document.getElementById('res') ;

        // 绑定事件
        oBtn.onclick = function() {
            var n1 = oNum1.value ;
            var n2 = oNum2.value ;
            console.log(n1 , n2) ;
            // 判断合法性
            if(!isNaN(n1) && !isNaN(n2)) {
                // 获取符号
                var f = oSel.value ;
                console.log(f);
                switch(f) {
                    // 全等判断
                    case '1' : oRes.value = n1 * 1 + n2 * 1 ; break ;
                    case '2' : oRes.value = n1 - n2 ; break ;
                    case '3' : oRes.value = n1 * n2 ; break ;
                    case '4' : oRes.value = n1 / n2 ; break ;
                }
            }
            else {
                alert('输入不是数字');
            }
        }

    </script>
    
</body>
</html>